<!--
 * @Description: 
 * @Date: 2022-07-18 17:38:09
 * @LastEditTime: 2022-08-04 16:55:52
 * @FilePath: \jsnode\css\shengbei.html
-->
<!DOCTYPE html>
<html>

<head>
    <style>
        body {
            width: 100%;
            background-color: gray;
            overflow-x:hidden
        }

        header {
            background-color: aquamarine;
            text-align: center;
            height: 50px;
            line-height: 50px;
        }

        footer {
            background-color: cadetblue;
            text-align: center;
            height: 50px;
            line-height: 50px;
        }

        .mid {
            overflow: hidden;
            padding-left: 100px;
            padding-right: 100px;
        }

        .center {
            width: 100%;
            height: 400px;
            background-color: crimson;
            float: left;
        }

        .left {
            float: left;
            width: 100px;
            height: 400px;
            background-color: burlywood;
            margin-left: -100%;
            position: relative;
            left: -100px;
        }

        .right {
            float: left;
            width: 100px;
            height: 400px;
            background-color: burlywood;
            margin-left: -100px;
            position: relative;
            right: -100px;
        }
    </style>
</head>

<body>
    <header>我来组成头部</header>
    <div class="mid">
        <div class="center">
            <p>
                123中间我来组成组成中间我来组成成中间我来组成中间我来组成中间我来组成中间我来组成中间我来组成中间我来组成中间我
                来组成中间我来组成中间我来组成中间我来组成中间成中间我来组成中间我来组成中间我来组成中间我来组成成中间我来组成中间我
                来组成中间我来组成中间我来组成成中间我来组成中间我来组成中间我来组成中间我来组成成中间我来组成中间我来组成中间我来我来
                组成中间我来组成中间我来组成中间我来组成中间我来组成中间我来组成中间我来组成中间我来组成中间我来组成中间我来组成成中间我
                来组成中间我来组成中间我来组成中间我来组成成中间我来组成中间我来组成中间我来组成123
            </p>
        </div>
        <div class="left">我来组成左边</div>
        <div class="right">我来组成右边</div>
    </div>

    <footer>我来组成脚部</footer>

</body>

</html>